----------------------------------------<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig" %>
<!DOCTYPE html>
<html>
<head>
 	<title>用户登录</title>
	<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
	<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
	<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
 	<link type="text/css" href="<%=basePath%>/css/oss/iot/login.css?<%=v%>" rel="stylesheet"/>
	<script type="text/javascript" src="<%=basePath%>/lib/jquery/jquery.backstretch.min.js"></script>
</head>

<body style="background-color: rgba(0, 0, 0, 0.3)">
	<div>
		<div>
			<img src="<%=basePath%>/image/wechat/iot/logo.png"   class="logo">
		</div>



		<div class="login_container login jui-form_submit" data-options=" url:'/user/login',
												  submit:'.add-Btn',
												  success:'sunccessReturn' ">

			<div style="margin: 0px;display: flex">

			<div class="divbg">
				<img src="<%=basePath%>/image/wechat/iot/loginbg.jpg"  class="imgbg">
			</div>

			<div style="margin-left: 55%;" class="div2">


			<div class="system-title">
				<%--			<p><%=ProConfig.SYS_WEB_LOGIN_NAME %></p>--%>
				<p>法院动环平台</p>
			</div>
			<div class="login-title" style="text-align: center">
				<span>登录</span>
<%--				<a class="ml-10 a-link" onclick="changeMode(5)">短信登录</a>--%>
<%--				<a class="float-right a-link" onclick="changeMode(2);">没有账户，立即注册</a>--%>
			</div>
			<div class="login-input" style="display: flex">
				<div style="width: 80px;margin-top: 15px">账户：</div><input class="input input-big na" validate="empty:请输入邮箱"  type-name="name" maxlength="30" placeholder="请输入邮箱或者登陆名">
			</div>
			<div class="login-input" style="display: flex">
				<div style="width: 80px;margin-top: 15px">密码：</div><input class="input input-big pd" validate="empty:请输入密码"  type-name="password" type="password" maxlength="50" placeholder="请输入密码">
			</div>
			<div style="margin: 20px;">
				<button class="btn add-Btn">登录</button>
				<!-- <span onmouseenter="showImage()" class="wxStyle">微信公众号入口</span> -->
<%--				<a class="float-right fot-a-link" onclick="changeMode(3);">忘记密码?</a>--%>
				<div class="checkbox-remember">
                	<input type="checkbox"  id="saveLogin">
                	<label for="saveLogin" class="checkbox" style="margin-left: 20px">记住密码</label>
				</div>
			</div>
		</div>
			</div>
		</div>

		<div class="login_container sms-login hide jui-form_submit" data-options=" url:'/user/sms/login',
												  submit:'.sms-login-Btn',
												  success:'sunccessReturn' ">
			<div class="login-title">
				<span>短信登录</span>
				<a class="ml-10 a-link" onclick="changeMode(1)">账户登录</a>
			</div>
			<div class="login-input">
				<input class="input input-big name-phone" validate="empty:请输入手机号" type-name="name" maxlength="30" placeholder="请输入手机号">
			</div>
			<div class="login-input" style="position: relative;">
				<canvas style="position: absolute;right: 20px;top: 3px;width: 100px;height: 38px;background: #fff;"
							onclick="reflash()" id="canvas" ></canvas>
				<input class="input input-big vcode-sms" style="width: 300px;" validate="empty:请输入图片验证码"  maxlength="6" placeholder="请输入图片验证码">
			</div>
			<div class="login-input" style="position: relative;">
				<span class="sms-btnGet">获取验证码</span>
				<input class="input input-big sms-validate" style="width: 300px;" validate="empty:请输入手机验证码" type-name="validate_code" maxlength="6" placeholder="请输入手机验证码">
			</div>
			<div style="margin-left: 20px;">
				<button class="btn sms-login-Btn">登录</button>
			</div>
		</div>

		<div class="wximg" style="display: none;">
			<img width="200px"  src="<%=basePath%>/image/oss/iot/footer_all.png">
		</div>

		<div class="login_container sms-register hide jui-form_submit"  data-options="  url:'/user/register',
												   submit:'.register-sms-Btn',
												   success:'registerSuccesssms',
												   before:'beforefunc' ">
			<div class="login-title">
				<span style="padding-right: 0;">短信注册</span><span style="padding: 0 5px;">/</span><span onclick="changeMode(2);" style="padding: 0;color: #a1a1a1;cursor:pointer;">邮件注册</span>
				<a class="float-right a-link" onclick="changeMode(1);">已有账户，立即登录</a>
			</div>
			<div class="login-input">
				<input class="input input-big telphone" validate="empty:请输入手机号,phone:请输入正确的手机号" type-name="phone" maxlength="30" placeholder="请输入手机号">
			</div>
			<div class="login-input">
				<input class="input input-big" validate="empty:请输入密码" type-name="password" type="password" maxlength="50" placeholder="请输入密码">
			</div>
			<input type="hidden" type-name="register_type" value="1">
			<div class="login-input">
				<input class="input input-big comfirm" validate="empty:请输入确认密码" type="password" maxlength="50" placeholder="请再次输入密码">
			</div>
			<div class="login-input" style="position: relative;">
				<canvas style="position: absolute;right: 20px;top: 3px;width: 100px;height: 38px;background: #fff;" onclick="reflash()" id="canvas2" ></canvas>
				<input class="input input-big vcode" style="width: 300px;" validate="empty:请输入图片验证码"  maxlength="6" placeholder="请输入图片验证码">
			</div>
			<div class="login-input" style="position: relative;">
				<span class="btnGet">获取验证码</span>
				<input class="input input-big" style="width: 300px;" validate="empty:请输入手机验证码" type-name="validate_code" maxlength="6" placeholder="请输入手机验证码">
			</div>
			<div style="margin-left: 20px;">
				<button class="btn register-sms-Btn">注册</button>
			</div>
		</div>

		<div class="login_container register hide jui-form_submit"  data-options="  url:'/user/register',
												   submit:'.register-Btn',
												   success:'registerSuccess',
												   before:'beforefunc' ">
			<div class="login-title">
				<span style="padding-right: 0;">邮箱注册</span><span style="padding: 0 5px;">/</span><span onclick="changeMode(4);" style="padding: 0;color: #a1a1a1;cursor:pointer;">短信注册</span>
				<a class="float-right a-link" onclick="changeMode(1);">已有账户，立即登录</a>
			</div>
			<div class="login-input">
				<input class="input input-big" validate="empty:请输入邮箱,email:请输入正确的邮箱格式" type-name="name" maxlength="30" placeholder="请输入邮箱">
			</div>
			<div class="login-input">
				<input class="input input-big" validate="empty:请输入密码" type-name="password" type="password" maxlength="50" placeholder="请输入密码">
			</div>
			<div class="login-input">
				<input class="input input-big comfirm" validate="empty:请输入确认密码" type="password" maxlength="50" placeholder="请再次输入密码">
			</div>
			<div style="margin-left: 20px;">
				<button class="btn register-Btn">注册</button>
			</div>
		</div>

		<div class="login_container get-password hide jui-form_submit" data-options=" url:'/user/reset/password',
												  submit:'.forget-Btn',
												  success:'forgetPasswordSucc'">
			<div class="login-title">
				<span>找回密码</span>
				<a class="float-right a-link" onclick="changeMode(1);">返回登录</a>
			</div>
			<div class="login-input">
				<input class="input input-big" validate="empty:请输入邮箱,email:请输入正确的邮箱格式" type-name="email" maxlength="30" placeholder="请输入邮箱">
			</div>
			<div style="margin-left: 20px;">
				<button class="btn forget-Btn">发送</button>
			</div>
		</div>

		<div class="footer">
			<div class="copyright-intro" style="text-align: center;">
				<span>
					Copyright © 2019-2029&nbsp;&nbsp;&nbsp;
					上海宸衢
<%--					<%=ProConfig.SYS_TECH_HELP%>--%>
<%--							<a style="color: #a4cde6;margin-left: 15px; " target="_blank" href="https://beian.miit.gov.cn"><%=ProConfig.SYS_BEIAN_NAME%></a>--%>
				</span>
			</div>
		</div>

	</div>
</body>
<script type="text/javascript">
	inIframe();
	$(function(){
		$.backstretch("<%=basePath%>/image/oss/iot/login_back6.jpg");
		var name = localStorage.getItem("na") ;
		var pd = localStorage.getItem("pd") ;
		if(name != null && name != ''){
			$(".na").val(name) ;
			$(".pd").val(pd) ;
			$("#saveLogin").attr("checked",true);
		}
	})

	function sunccessReturn(data){
		if(data.status == status_code.OK){
			localStorage.setItem("userId",data.data.id)
			localStorage.setItem("ucode", data.data.user_key);
			if($("#saveLogin").is(":checked")){
				localStorage.setItem("na",  $(".na").val());
				localStorage.setItem("pd",$(".pd").val());
			}else{
				localStorage.removeItem("na");
				localStorage.removeItem("pd");
			}
			forwardUrl("/iot/index");
			<%--forwardUrl("<%=basePath%>/page/bigscreen/index")--%>
			// http://localhost:8080/page/visual/show.html?keyCode=34d447abfe3a4a2ca3ef4444cd18d67a
			<%--window.location.href="<%=basePath%>/page/visual/show.html?keyCode=34d447abfe3a4a2ca3ef4444cd18d67a";--%>
		}else{
			tip(data.statusMsg,1500);
		}
	}
	// 注册返回
	function registerSuccess(data){
		if(data.status == status_code.OK){
			forwardUrl("/iot/login",2000,"激活邮件发送，请到邮箱中激活账户");
		}else{
			$(".register-Btn").removeAttr("disabled");
			tip(data.statusMsg,1500);
		}
	}
	function registerSuccesssms(data){
		if(data.status == status_code.OK){
			forwardUrl("/iot/login",1200,"账户注册成功");
		}else{
			$(".register-Btn").removeAttr("disabled");
			tip(data.statusMsg,1500);
		}
	}
	function forgetPasswordSucc(data){
		if(data.status == status_code.OK){
			forwardUrl("/iot/login",3000,"重置密码邮件发送成功");
		}else{
			tip(data.statusMsg,1500);
		}
	}
	function beforefunc(){
		if( $(".register .comfirm").val() != gic("password",".register").val() ){
			tip("二次密码输入不一致，请检查");
			return false ;
		}else{
			$(".register-Btn").attr("disabled","disabled");
			return true ;
		}
	}
	function changeMode(type){
		delayOperate(500,function(){
			$(".login_container").hide();
			if(type == 1){
				$(".login").show();
			}else if(type ==2){
				$(".register").show();
			}else if(type ==3){
				$(".get-password").show();
			}else if(type == 4){
				$(".sms-register").show();
			}else if(type == 5){
				$(".sms-login").show();
			}
		})
	}
	function getActiveCode(){
		var name = gic("name",".register").val() ;
		if(!validater.empty(name)){
			getAjax(localUrl+"/validate/"+name, function(){

			});
		}else{
			tip("请输入邮箱");
		}
	}

	$(document).keyup(function (e) {
	    if (e.keyCode == 13) {
	    	$('.add-Btn').trigger("click");
	    }
	});

	// setTimeOut 倒计时
	function resetTime(time) {
		var s = time ;
		timer = setInterval(countDown, 1000);
		function countDown(){
			s-- ;
			if(s<2){
				flag=true ;
				$(".btnGet,.sms-btnGet").html("获取验证码");
				clearInterval(timer);
			}else{
				$(".btnGet,.sms-btnGet").html("("+ s + "秒" +")");
			}
		}
	}


	var flag = true ;
	$(function() {
		var aimg = $("#validate-code").attr("src");
		$("#validate-code").click(function() {
			$(this).attr("src", aimg + "?" + Math.random());
		})
		// 获取验证码
		$(".btnGet").click(function(){
			if(!flag){
				return ;
			}
			// 发送验证码请求
			var phone = $(".telphone").val() ;
			if(validater.empty(phone) || !validater.phone(phone) ){
				tip("请输入手机号码");
				return ;
			}
			var code = $(".vcode").val();
			commonAjax('GET',localUrl + '/security_code/'+phone+"?code="+code+"&type=1" , "",function(data){
				if(isOK(data)){
					resetTime(59);
					flag = false ;
					tip("验证码发送成功");
				}else{
					tip(data.statusMsg);
				}
			});
		})

		$(".sms-btnGet").click(function(){
			if(!flag){
				return ;
			}
			// 发送验证码请求
			var phone = $(".name-phone").val() ;
			if(validater.empty(phone) || !validater.phone(phone) ){
				tip("请输入手机号码");
				return ;
			}
			var code = $(".vcode-sms").val();
			commonAjax('GET',localUrl + '/security_code/'+phone+"?code="+code+"&type=0" , "",function(data){
				if(isOK(data)){
					resetTime(59);
					flag = false ;
					tip("验证码发送成功");
				}else{
					tip(data.statusMsg);
				}
			});
		});
		reflash();
	})

	function reflash(){
		commonAjax('GET',localUrl + '/get/validate/code' , "",function(data){
			if(isOK(data)){
				draw(data.data);
				draw2(data.data);
			}else{
				tip(data.statusMsg);
			}
		});
	}

	function showImage(){
		layer.open({
			  type: 1,
			  title: false,
			  closeBtn: 0,
			  skin: 'layui-layer-nobg', //没有背景色
			  shadeClose: true,
			  content: $('.wximg')
			});
	}

	function draw(showTxt) {
		var canvas_width = $('#canvas').width();
		var canvas_height = $('#canvas').height();
		var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
		var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
		canvas.width = canvas_width;
		canvas.height = canvas_height;
		var aCode = showTxt.split(",");
		var aLength = aCode.length;//获取到数组的长度
		for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
			var deg = Math.random() - 0.5; //产生一个随机弧度
			var txt = showTxt[i];//得到随机的一个内容
			var x = 10 + i * 20;//文字在canvas上的x坐标
			var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
			context.font = "bold 23px 微软雅黑";
			context.translate(x, y);
			context.rotate(deg);
			context.fillStyle = randomColor();
			context.fillText(txt, 0, 0);
			context.rotate(-deg);
			context.translate(-x, -y);
		}
		for (var i = 0; i <= 5; i++) { //验证码上显示线条
			context.strokeStyle = randomColor();
			context.beginPath();
			context.moveTo(Math.random() * canvas_width, Math.random()
					* canvas_height);
			context.lineTo(Math.random() * canvas_width, Math.random()
					* canvas_height);
			context.stroke();
		}
		for (var i = 0; i <= 30; i++) { //验证码上显示小点
			context.strokeStyle = randomColor();
			context.beginPath();
			var x = Math.random() * canvas_width;
			var y = Math.random() * canvas_height;
			context.moveTo(x, y);
			context.lineTo(x + 1, y + 1);
			context.stroke();
		}
	}

	function draw2(showTxt) {
		var canvas_width = $('#canvas2').width();
		var canvas_height = $('#canvas2').height();
		var canvas = document.getElementById("canvas2");//获取到canvas的对象，演员
		var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
		canvas.width = canvas_width;
		canvas.height = canvas_height;
		var aCode = showTxt.split(",");
		var aLength = aCode.length;//获取到数组的长度
		for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
			var deg = Math.random() - 0.5; //产生一个随机弧度
			var txt = showTxt[i];//得到随机的一个内容
			var x = 10 + i * 20;//文字在canvas上的x坐标
			var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
			context.font = "bold 23px 微软雅黑";
			context.translate(x, y);
			context.rotate(deg);
			context.fillStyle = randomColor();
			context.fillText(txt, 0, 0);
			context.rotate(-deg);
			context.translate(-x, -y);
		}
		for (var i = 0; i <= 5; i++) { //验证码上显示线条
			context.strokeStyle = randomColor();
			context.beginPath();
			context.moveTo(Math.random() * canvas_width, Math.random()
					* canvas_height);
			context.lineTo(Math.random() * canvas_width, Math.random()
					* canvas_height);
			context.stroke();
		}
		for (var i = 0; i <= 30; i++) { //验证码上显示小点
			context.strokeStyle = randomColor();
			context.beginPath();
			var x = Math.random() * canvas_width;
			var y = Math.random() * canvas_height;
			context.moveTo(x, y);
			context.lineTo(x + 1, y + 1);
			context.stroke();
		}
	}

	//得到随机的颜色值
	function randomColor() {
		var r = Math.floor(Math.random() * 256);
		var g = Math.floor(Math.random() * 256);
		var b = Math.floor(Math.random() * 256);
		return "rgb(" + r + "," + g + "," + b + ")";
	}
</script>
</html>
